<script setup>
import { ref } from "vue";

const colors = [
  "#5698c3",
  "#407763",
  "#488d79",
  "#3b7fa2",
  "#8dc6c3",
  "#3f366b",
];
const bgColor = "#fff";
const itemStyle = {
  star5: {
    color: colors[0],
  },
  star4: {
    color: colors[1],
  },
  star3: {
    color: colors[2],
  },
  star2: {
    color: colors[3],
  },
};

const data = [
  {
    name: "著作",
    itemStyle: {
      color: colors[1],
    },
    children: [
      // ====== 数学典籍 ======
      {
        name: "数学",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "《九章算术》\n(东汉, 成体系)",
                detail: "含方田、粟米等九章，最早负数记录",
              },
              {
                name: "《周髀算经》\n(西汉, 天文数学)",
                detail: "勾股定理首证，盖天说核心",
              },
              {
                name: "《数书九章》\n(南宋·秦九韶)",
                detail: "大衍求一术解同余式",
              },
              {
                name: "《测圆海镜》\n(金·李冶)",
                detail: "天元术代数体系建立",
              },
              {
                name: "《四元玉鉴》\n(元·朱世杰)",
                detail: "四元高次方程组求解",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "《孙子算经》\n(南北朝)",
                detail: "物不知数问题雏形",
              },
              {
                name: "《缉古算经》\n(唐·王孝通)",
                detail: "三次方程数值解法",
              },
              {
                name: "《益古演段》\n(元·李冶)",
                detail: "图解天元术应用",
              },
              {
                name: "《算法统宗》\n(明·程大位)",
                detail: "珠算口诀集大成",
              },
              {
                name: "《割圆密率捷法》\n(清·明安图)",
                detail: "独创连比例弧矢公式",
              },
            ],
          },
          {
            name: "3☆",
            children: [
              {
                name: "《夏侯阳算经》\n(唐)",
                detail: "田亩赋税计算手册",
              },
              {
                name: "《杨辉算法》\n(南宋)",
                detail: "纵横图与实用算术",
              },
              {
                name: "《算学启蒙》\n(元·朱世杰)",
                detail: "多元高次方程启蒙",
              },
              {
                name: "《同文算指》\n(明·利徐合译)",
                detail: "首次引入欧洲笔算",
              },
            ],
          },
        ],
      },
      // ====== 天文历法 ======
      {
        name: "天文地理",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "《甘石星经》\n(战国)",
                detail: "首部星表记录1464星",
              },
              {
                name: "《灵宪》\n(东汉·张衡)",
                name: "《授时历》\n(元·郭守敬)",
                detail: "回归年365.2425日",
              },
              {
                name: "《崇祯历书》\n(明·徐光启)",
                detail: "引进第谷体系与球面三角",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "《浑天仪注》\n(东汉·张衡)",
                detail: "水运浑象制作规范",
              },
              {
                name: "《大衍历》\n(唐·一行)",
                detail: "不等间距二次插值法",
              },
              {
                name: "《新仪象法要》\n(宋·苏颂)",
                detail: "水运仪象台设计图",
              },
              {
                name: "《晓庵新法》\n(清·王锡阐)",
                detail: "日月食精确计算法",
              },
            ],
          },
          {
            name: "3☆",
            children: [
              {
                name: "《水经注》\n(北魏·郦道元)",
                detail: "记载河流1252条",
              },
              {
                name: "《徐霞客游记》\n(明)",
                detail: "岩溶地貌17省考察",
              },
              {
                name: "《海国图志》\n(清·魏源)",
                detail: "首部系统世界地理志",
              },
            ],
          },
        ],
      },
      // ====== 新增农学分支 ======
      {
        name: "农学技术",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "《齐民要术》\n(北魏·贾思勰)",
                detail: "涵盖农林牧副渔各业",
              },
              {
                name: "《农政全书》\n(明·徐光启)",
                detail: "引入甘薯等美洲作物",
              },
              {
                name: "《王祯农书》\n(元)",
                detail: "农器图谱306幅",
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "《陈旉农书》\n(南宋)",
                detail: "江南稻作技术集成",
              },
              {
                name: "《农桑辑要》\n(元司农司)",
                detail: "官方颁布农业法规",
              },
              {
                name: "《天工开物》\n(明·宋应星)",
                detail: "收录农业技术18卷",
              },
            ],
          },
        ],
      },
      {
        name: "中医典籍",
        children: [
          {
            name: "5☆",
            children: [
              {
                name: "《黄帝内经》\n(战国至西汉)",
                detail: "奠定阴阳五行与藏象学说基础", // 系统论述人体生理病理与养生‌:ml-citation{ref="4,7" data="citationList"}
              },
              {
                name: "《伤寒杂病论》\n(东汉·张仲景)",
                detail: "创立六经辨证诊疗体系", // 确立中医临床辨证论治规范‌:ml-citation{ref="4,8" data="citationList"}
              },
              {
                name: "《神农本草经》\n(东汉)",
                detail: "记载365种药物分类体系", // 首创三品分类法影响后世药学‌:ml-citation{ref="3,6" data="citationList"}
              },
            ],
          },
          {
            name: "4☆",
            children: [
              {
                name: "《针灸甲乙经》\n(晋·皇甫谧)",
                detail: "首部针灸学系统专著", // 确定349个穴位定位标准‌:ml-citation{ref="6,8" data="citationList"}
              },
              {
                name: "《千金方》\n(唐·孙思邈)",
                detail: "收录5300余首验方", // 首创妇科儿科独立分科‌:ml-citation{ref="4,7" data="citationList"}
              },
              {
                name: "《本草纲目》\n(明·李时珍)",
                detail: "载药1892种附图1109幅", // 建立纲目分类体系‌:ml-citation{ref="3,6" data="citationList"}
              },
            ],
          },
        ],
      },
    ],
  },
];
for (let j = 0; j < data.length; ++j) {
  let level1 = data[j].children;
  for (let i = 0; i < level1.length; ++i) {
    let block = level1[i].children;
    let bookScore = [];
    let bookScoreId;
    for (let star = 0; star < block.length; ++star) {
      let style = (function (name) {
        switch (name) {
          case "5☆":
            bookScoreId = 0;
            return itemStyle.star5;
          case "4☆":
            bookScoreId = 1;
            return itemStyle.star4;
          case "3☆":
            bookScoreId = 2;
            return itemStyle.star3;
          case "2☆":
            bookScoreId = 3;
            return itemStyle.star2;
        }
      })(block[star].name);
      block[star].label = {
        color: style.color,
        downplay: {
          opacity: 0.5,
        },
      };
      if (block[star].children) {
        style = {
          opacity: 1,
          color: style.color,
        };
        block[star].children.forEach(function (book) {
          book.value = 1;
          book.itemStyle = style;
          book.label = {
            color: style.color,
          };
          let value = 1;
          if (bookScoreId === 0 || bookScoreId === 3) {
            value = 5;
          }
          if (bookScore[bookScoreId]) {
            bookScore[bookScoreId].value += value;
          } else {
            bookScore[bookScoreId] = {
              color: colors[bookScoreId],
              value: value,
            };
          }
        });
      }
    }
    level1[i].itemStyle = {
      color: data[j].itemStyle.color,
    };
  }
}

const option = ref({
  // 图表整体配置
  title: {
    text: "中国古代科学著作", // 修改标题
    left: "left",
    top: 40,
    textStyle: {
      color: "#2c3e50",
      fontSize: 18,
    },
  },
  //   backgroundColor: bgColor, // 图表背景颜色
  color: colors, // 调色盘，用于循环系列颜色
  series: [
    // 图表系列列表
    {
      type: "sunburst", // 使用旭日图（太阳辐射图）类型
      data: data, // 数据源（树形结构数据）
      radius: [0, "100%"],
      // animationDuration:1500,

      // 数据排序规则（影响层级渲染顺序）
      sort: function (a, b) {
        if (a.depth === 1) {
          // 第二层节点（depth从0开始）
          return b.getValue() - a.getValue(); // 按值降序排列
        } else {
          return a.dataIndex - b.dataIndex; // 其他层按原始数据顺序排列
        }
      },

      // 标签全局配置
      label: {
        rotate: "radial", // 标签沿径向旋转对齐
        color: bgColor, // 标签文字颜色（与背景色相同，可能隐藏标签）
      },

      // 数据项样式
      itemStyle: {
        borderColor: bgColor, // 区块边框颜色
        borderWidth: 2, // 边框宽度（分隔区块）
      },

      // 分层样式配置（索引对应数据depth层级）
      levels: [
        {}, // 第0层（根节点）使用默认配置

        // 第1层配置（depth=0的第一层子节点）
        {
          r0: 0, // 内半径起始
          r: 50, // 外半径结束
          label: {
            rotate: 0, // 标签水平显示（不旋转）
          },
        },

        // 第2层配置（depth=1的子节点）
        {
          r0: 50, // 内半径接续上层
          r: 115, // 扩展半径范围
        },

        // 第3层配置（depth=2的子节点）
        {
          r0: 155, // 内半径（与上层保持间距）
          r: 135,
          itemStyle: {
            shadowBlur: 2, // 区块阴影模糊度
            shadowColor: colors[2], // 阴影颜色取自调色盘第三色
            color: "transparent", // 区块填充透明（仅显示边框和阴影）
          },
          label: {
            rotate: "tangential", // 标签沿切线方向旋转
            fontSize: 10, // 缩小字体
            color: colors[0], // 文字颜色使用调色盘第一色
          },
        },

        // 第4层配置（depth=3的最外层节点）
        {
          r0: 170, // 紧接上层外半径
          r: 175, // 较窄的环形区域
          itemStyle: {
            shadowBlur: 80, // 大范围阴影效果
            shadowColor: colors[0], // 使用调色盘第一色作为阴影
          },
          label: {
            position: "outside", // 标签显示在外部
            // textShadowBlur: 5, // 文字阴影模糊度
            // textShadowColor: "#333", // 文字阴影颜色
          },
          downplay: {
            // 非高亮状态样式（可能需要改为emphasis）
            label: {
              opacity: 0.5, // 标签半透明
            },
          },
        },
      ],
    },
  ],
});
</script>

<template>
  <!-- 科学著作的旭日图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
  max-width: 100%;
}
</style>
